<div *ngIf="rowList['title'] !== undefined">
  <div class="box">
    <!-- title -->
    <div class="tit">
      <div class="tit-col"
           [class.normal-bgcolor]="rowList['WCBJ'] === 0"
           [class.warning-bgcolor]="rowList['WCBJ'] === 1"
           [class.overtime-bgcolor]="rowList['WCBJ'] === 2"
           [class.complete-bgcolor]="rowList['WCBJ'] === 3">
      </div>
      <div class="tit-img" (click)="change()">
        <!--<i class="anticon anticon-message"></i>-->
        <i *ngIf="hide === 'none' " class="anticon anticon-right"></i>
        <i *ngIf="hide === 'block'" class="anticon anticon-down"></i>
      </div>
      <div class="tit-tit"><span>{{ rowList['title'] }}</span></div>
      <div class="tit-ot"
           [class.normal-color]="rowList['WCBJ'] === 0"
           [class.warning-color]="rowList['WCBJ'] === 1"
           [class.overtime-color]="rowList['WCBJ'] === 2"
           [class.complete-color]="rowList['WCBJ'] === 3">
        <span *ngIf="rowList['comsumeTime'] !== undefined && rowList['comsumeTime'] > 0">耗:{{ toHour(rowList['comsumeTime']) }}</span>
        <span *ngIf="rowList['beyondTime'] !== undefined && rowList['beyondTime'] > 0">超:{{ toHour(rowList['beyondTime']) }}</span>
        <span *ngIf="rowList['delivered'] !== undefined && rowList['delivered'] > 0">待发货:{{ rowList['delivered'] }}个配件</span>
        <span *ngIf="rowList['distribution'] !== undefined && rowList['distribution'] > 0">待配送:{{ rowList['distribution'] }}个配件</span>
        <!--<span *ngIf="rowList['complete'] !== undefined && rowList['complete'] > 0">完成:{{ rowList['complete'] }}单</span>-->
        <span *ngIf="rowList['processing'] !== undefined && rowList['processing'] > 0">进行中:{{ rowList['processing'] }}个配件</span>
        <span *ngIf="rowList['timeOut'] !== undefined && rowList['timeOut'] > 0">超时:{{ rowList['timeOut'] }}个配件</span>
        <span *ngIf="rowList['finishSG'] !== undefined && rowList['finishSG'] > 0">完工:{{ rowList['finishSG'] }}项</span>
        <span *ngIf="rowList['waitSG'] !== undefined && rowList['waitSG'] > 0">待施工:{{ rowList['waitSG'] }}项</span>
        <span *ngIf="rowList['ingSG'] !== undefined && rowList['ingSG'] > 0">施工中:{{ rowList['ingSG'] }}项</span>
        <span *ngIf="rowList['stopSG'] !== undefined && rowList['stopSG'] > 0">停:{{ rowList['stopSG'] }}项</span>
        <span *ngIf="rowList['beyongSG'] !== undefined && rowList['beyongSG'] > 0">超时:{{ rowList['beyongSG'] }}项</span>
      </div>
      <div class="tit-type"
           [class.normal-color]="rowList['WCBJ'] === 0"
           [class.warning-color]="rowList['WCBJ'] === 1"
           [class.overtime-color]="rowList['WCBJ'] === 2"
           [class.complete-color]="rowList['WCBJ'] === 3">
        <span>{{ rowList['repairStyle'] }}</span>
      </div>
    </div>

    <!-- control -->
    <div class="con" *ngIf="rowData.length > 0">
      <div class="con-bg">
        <div class="con-sp" *ngFor="let data of rowData">
          <div>{{ data['YUANYIN'] }}</div>
          <div>{{ data['RY'] }}</div>
        </div>
      </div>
    </div>

    <!-- table  物流配送、下订单、中转站 -->
    <div class="tab" *ngIf="pageData.length > 0 && rowList['title'] !== '服务工单'">
      <div class="tab-bg">
        <div class="tab-sp" *ngFor="let tab of pageData">
          <div>{{ tab['SPMC'] }}({{ tab['SPID'] }})</div>
          <div><span *ngIf="rowList['WCBJ'] !== undefined"
                     [class.overtime-bgcolor]="rowList['WCBJ'] === 2"
                     [class.warning-bgcolor]="rowList['WCBJ'] === 1"></span> {{ tab['JDMC'] }}</div>
          <div *ngIf="tab['HS'] !== undefined">耗:{{ toHour(tab['HS']) }}</div>
        </div>
      </div>
    </div>
    <!-- table 服务工单 -->
    <div class="fwgd" *ngIf="pageData.length > 0 && rowList['title'] === '服务工单'">
      <div class="tab-fwgd">
        <div class="fwgd-head">
          <div *ngFor="let head of FWGDhead" [ngStyle]="{width: head.style  }">{{ head.lable }}</div>
        </div>
        <div class="fwgd-sp" *ngFor="let tab of pageData">
          <div>{{ tab['SGF'] }}-{{ tab['SPMC'] }}</div>
          <div>{{ tab['SGZT'] }}</div>
          <div>{{ toHour(tab['HS']) }}</div>
          <div>{{ timeChange(tab['YJWCRQ_SJ']) }}</div>
        </div>
      </div>
    </div>

    <div [ngStyle]="{ display: hide }" *ngIf="tableData.length > 0">
      <table class="detailed">
        <thead>
        <tr>
          <td *ngFor="let data of parmas['tableData']" [ngStyle]="{width: data['width']+'px' }">
            <span> {{ data['headerName'] }} </span>
          </td>
        </tr>
        </thead>
        <tbody>
        <div *ngFor="let tab of tableData" class="detailed-tr"
             style=" width:1180px " [class.detailes-col]="tab['cilck']">
          <div style="display: flex" >
            <div class="detailed-iocn" (click)="tabChanges(tab['LYDJHM'], tab['SPID'])">
              <i *ngIf="!tab['cilck']" class="anticon anticon-right"></i>
              <i *ngIf="tab['cilck']" class="anticon anticon-down"></i>
            </div>
            <div *ngFor="let data of parmas['tableData']" [ngStyle]="{ width: data['width']+'px' }"  class="tbo-div">
            <span *ngIf=' ("HS" !== data["field"]) && ("CS" !== data["field"]) && ("GS" !== data["field"]) &&
                          ("KSRQ_SJ" !== data["field"])  && ("YJWCRQ_SJ" !== data["field"])  && ("WCRQ_SJ" !== data["field"])'>
              {{ tab[data['field']] }}
            </span>
              <i *ngIf=' "HS" === data["field"] '>
                {{ toHour(tab["HS"]) }}
              </i>
              <i *ngIf=' "CS" === data["field"] '>
                {{ toHour(tab["CS"]) }}
              </i>
              <i *ngIf=' "GS" === data["field"] '>
                {{ toHour(tab["GS"]) }}
              </i>
              <i *ngIf=' "KSRQ_SJ" === data["field"] '>
                {{ timeChange(tab["KSRQ_SJ"]) }}
              </i>
              <i *ngIf=' "YJWCRQ_SJ" === data["field"] '>
                {{ timeChange(tab["YJWCRQ_SJ"]) }}
              </i>
              <i *ngIf=' "WCRQ_SJ" === data["field"] '>
                {{ timeChange(tab["WCRQ_SJ"]) }}
              </i>
            </div>
          </div>


          <div [ngStyle]="{ display: hiden }" *ngIf="infotable.length > 0 && comeNum === tab['LYDJHM'] && comeId === tab['SPID']" style="padding: 6px 35px;">
            <table class="detailed" style="width: 1100px;">
              <thead>
              <tr>
                <td *ngFor="let data of parmas['infotable']" [ngStyle]="{width: data['width']+'px' }">
                  <span> {{ data['headerName'] }} </span>
                </td>
              </tr>
              </thead>
              <tbody>
              <tr *ngFor="let tab of infotable">
                <td *ngFor="let data of parmas['infotable']">
          <span *ngIf=' ("HS" !== data["field"]) && ("CS" !== data["field"]) && ("GS" !== data["field"]) &&
          ("KSRQ_SJ" !== data["field"])  && ("YJWCRQ_SJ" !== data["field"])  && ("WCRQ_SJ" !== data["field"])'>
          {{ tab[data['field']] }}
          </span>
                  <i *ngIf=' "HS" === data["field"] '>
                    {{ toHour(tab["HS"]) }}
                  </i>
                  <i *ngIf=' "CS" === data["field"] '>
                    {{ toHour(tab["CS"]) }}
                  </i>
                  <i *ngIf=' "GS" === data["field"] '>
                    {{ toHour(tab["GS"]) }}
                  </i>
                  <i *ngIf=' "KSRQ_SJ" === data["field"] '>
                    {{ timeChange(tab["KSRQ_SJ"]) }}
                  </i>
                  <i *ngIf=' "YJWCRQ_SJ" === data["field"] '>
                    {{ timeChange(tab["YJWCRQ_SJ"]) }}
                  </i>
                  <i *ngIf=' "WCRQ_SJ" === data["field"] '>
                    {{ timeChange(tab["WCRQ_SJ"]) }}
                  </i>
                </td>
              </tr>
              </tbody>
            </table>
          </div>


        </div>
        </tbody>
      </table>
    </div>

  </div>



</div>
